<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        header {
            width: 100%;
            height: 50px;
            background-color: beige;
            display: flex;
        }

        header div {
            flex: 1;
            line-height: 50px;
            text-align: center;
        }

        header div.active {
            background: pink;
        }

    </style>
</head>
<body>
    <header>
        <!-- <div class="active">a</div>
        <div>b</div>
        <div>c</div> -->
    </header>

    <main>
        <!-- content a<br>content a<br>content a<br>content a<br> -->
    </main>

    <script>

        const data = [
            {
                tabName: 'aa',
                content: 'content a<br>content a<br>content a<br>content a<br>',
            },
            {
                tabName: 'bb',
                content: 'content b<br>content b<br>content b<br>content b<br>',
            },
            {
                tabName: 'cc',
                content: 'content c<br>content c<br>content c<br>content c<br>',
            },
            {
                tabName: 'dd',
                content: 'content d<br>content d<br>content d<br>content d<br>',
            },
        ];

        const header = document.querySelector('header');
        const main = document.querySelector('main');

        // 把数组中第一项的内容给到main
        main.innerHTML = data[0].content;

        for (let i = 0; i < data.length; i++) {
            // 注册点击事件
            const item = data[i];
            const div = document.createElement('div');
            div.innerText = item.tabName;
            if (i === 0) {
                // 给第一个高亮
                div.setAttribute('class', 'active');
            }
            // i: 正确的i
            div.addEventListener('click', function () {
                const divList = document.querySelectorAll('header div');
                for (const divv of divList) {
                    divv.removeAttribute('class');
                }
                // 高亮自己
                div.setAttribute('class', 'active');
                // 换内容
                main.innerHTML = data[i].content;
            });
            header.appendChild(div);
        }





    </script>
</body>
</html>